import echarts from "echarts";

export default {
  data() {
    return {
      lineChart: null,
    };
  },
  methods: {
            renderLineChart(list) {
            console.log('list',list)
         const colorList = [["#9effff","#9E87FF",'rgba(158,135,255, 0.3)',"#9E87FF"],
         ['#73DD39','#73DDFF','rgba(115,221,255, 0.3)','#73DDFF'],
         ['#fe9a','#fe9a8b','rgba(254,154,139, 0.3)','#fe9a8b'],]
           let dateArr=[]
           let dataObj={date0:[],date1:[],date2:[]}
            list.forEach((item,i) => {
                dateArr.push(item.date.substring(5))
                console.log(dateArr)
                dataObj.date0.push(item.received)
                dataObj.date1.push(item.receiving)
                dataObj.date2.push(item.total)
            });
          let series=['已收','未收','应收'].map((item,i)=>{
               return {
                name: item,
                type: 'line',
                data:dataObj[`date${i}`],
                symbolSize: 1,
                symbol: 'circle',
                smooth: true,
                yAxisIndex: 0,
                showSymbol: false,
                lineStyle: {
                    width: 2,
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                            offset: 0,
                            color:colorList[i][0]
                        },
                        {
                            offset: 1,
                            color: colorList[i][1]
                        }
                    ]),
                    shadowColor: colorList[i][2],
                    shadowBlur: 10,
                    shadowOffsetY: 20
                },
                itemStyle: {
                    normal: {
                        color: colorList[i][3],
                        borderColor: colorList[i][3]
                    }
                }
               }
           })
        //    图标的配置和数据
         let  option = {
                // 右上角内容
                  legend: {
                      icon: 'circle',
                      top: '5%',
                      right: '5%',
                      itemWidth: 6,
                      itemGap: 20,
                      textStyle: {
                      color: '#556677'
                      }
                  },
                  tooltip: {
                      trigger: 'axis',
                      axisPointer: {
                          label: {
                              show: true,
                              backgroundColor: '#fff',
                              color: '#556677',
                              borderColor: 'rgba(0,0,0,0)',
                              shadowColor: 'rgba(0,0,0,0)',
                              shadowOffsetY: 0
                          },
                          lineStyle: {
                              width: 0
                          }
                      },
                      backgroundColor: '#fff',
                      textStyle: {
                          color: '#5c6c7c'
                      },
                      padding: [10, 10],
                      extraCssText: 'box-shadow: 1px 0 1px 0 rgba(163,163,163,0.5)'
                  },
                  grid: {
                      top: '15%',
                  },
                  xAxis: [{
                      type: 'category',
                      data:  dateArr,
                      axisLine: {
                          lineStyle: {
                              color: '#DCE2E8'
                          }
                      },
                      axisTick: {
                          show: false
                      },
                      axisLabel: {
                          interval: 0,
                          textStyle: {
                              color: '#556677'
                          },
                          // 默认x轴字体大小
                          fontSize: 11,
                          // margin:文字到x轴的距离
                          margin: 15
                      },
                      axisPointer: {
                          label: {
                              padding: [0, 0, 10, 0],
                              // 这里的margin和axisLabel的margin要一致!
                              margin: 15,
                              // 移入时的字体大小
                              fontSize: 12,
                              backgroundColor: {
                                  type: 'linear',
                                  x: 0,
                                  y: 0,
                                  x2: 0,
                                  y2: 1,
                                  colorStops: [{
                                      offset: 0,
                                      color: '#fff' // 0% 处的颜色
                                  }, {
                                      // offset: 0.9,
                                      offset: 0.86,
                                      /*
              0.86 = （文字 + 文字距下边线的距离）/（文字 + 文字距下边线的距离 + 下边线的宽度）
                                      
                                      */
                                      color: '#fff' // 0% 处的颜色
                                  }, {
                                      offset: 0.86,
                                      color: '#33c0cd' // 0% 处的颜色
                                  }, {
                                      offset: 1,
                                      color: '#33c0cd' // 100% 处的颜色
                                  }],
                                  global: false // 缺省为 false
                              }
                          }
                      },
                      boundaryGap: false
                  }],
                  yAxis: {
                      type: 'value',
                      axisTick: {
                          show: false
                      },
                      axisLine: {
                          show: true,
                          lineStyle: {
                              color: '#DCE2E8'
                          }
                      },
                    //   左边字体线的颜色
                      axisLabel: {
                          textStyle: {
                              color: '#556677'
                          }
                      },
                    // 图是否要框线
                      splitLine: {
                          show: false
                      }
                  },
                  series
              };
           
              //  使用刚指定的配置项和数据显示图表(setOption(option))
                this.lineChart.setOption(option)
            }
        }
    }
 

